<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout布局</title>
    <!-- vue前端js框架 -->
    <script src="../js/vue.js"></script>
        <!-- 这个一定在vue.js前端框架的后面 -->
    <script src="../js/elementui.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        #one .el-row {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        #one .el-col {
          border-radius: 4px;
        }
        #one .bg-purple-dark {
          background: #99a9bf;
        }
        #one .bg-purple {
          background: #d3dce6;
        }
        #one .bg-purple-light {
          background: #e5e9f2;
        }
        #one .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        #one .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
      </style>
	  
	  <style>
	    #tow .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    #tow .el-col {
	      border-radius: 4px;
	    }
	    #tow .bg-purple-dark {
	      background: #99a9bf;
	    }
	    #tow .bg-purple {
	      background: #d3dce6;
	    }
	    #tow .bg-purple-light {
	      background: #e5e9f2;
	    }
	    #tow .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    #tow .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
	  </style>
	  
	  <style>
	    #three .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    #three .el-col {
	      border-radius: 4px;
	    }
	    #three .bg-purple-dark {
	      background: #99a9bf;
	    }
	    #three .bg-purple {
	      background: #d3dce6;
	    }
	    #three .bg-purple-light {
	      background: #e5e9f2;
	    }
	    #three .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    #three .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
	  </style>
	  
	  <style>
	    #four .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    #four .el-col {
	      border-radius: 4px;
	    }
	    #four .bg-purple-dark {
	      background: #99a9bf;
	    }
	    #four .bg-purple {
	      background: #d3dce6;
	    }
	    #four .bg-purple-light {
	      background: #e5e9f2;
	    }
	    #four .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    #four .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
	  </style>
	  
	  <style>
	    #five .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    #five .el-col {
	      border-radius: 4px;
	    }
	    #five .bg-purple-dark {
	      background: #99a9bf;
	    }
	    #five .bg-purple {
	      background: #d3dce6;
	    }
	    #five .bg-purple-light {
	      background: #e5e9f2;
	    }
	    #five .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    #five .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
	  </style>
	  
	  <style>
	    #six .el-col {
	      border-radius: 4px;
	    }
	    #six .bg-purple-dark {
	      background: #99a9bf;
	    }
	    #six .bg-purple {
	      background: #d3dce6;
	    }
	    #six .bg-purple-light {
	      background: #e5e9f2;
	    }
	    #six .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	  </style>
	  
</head>
<body>
    <div id="app">
		<div id="one">
			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
			</el-row>
		</div>
		<hr />
		
		<div id="tow">
			<el-row :gutter="20">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
		<hr />
		<div id="three">
			<el-row :gutter="20">
			  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
		<hr />
		<div id="four">
			<el-row :gutter="20">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
		<hr />
		<div id="five">
			<el-row type="flex" class="row-bg">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="center">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="end">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="space-between">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="space-around">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
		<hr />
		<div id="six">
			<el-row :gutter="10">
			  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
			  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
			</el-row>
		</div>
    </div>
</body>
<script>
    new Vue({
      el: "#app",
        data: {
           
        }
    })
</script>
</html>